<template>
  <div class="index">
    <van-sticky>
    <div>

      <van-row type="flex" justify="space-between">


        <van-col span="7" >

        <van-cell is-link @click="showArea = true" class="sousuo" >
          <template #right-icon>
            <span class="custom-title">{{address.city}}<van-icon name="arrow-down" /></span>

          </template>
        </van-cell>

           <van-action-sheet v-model="showArea" title="地址">
            <van-area
              :area-list="areaList"
              :columns-placeholder="['请选择', '请选择', '请选择']"
              @cancel="cancelArea"
              @confirm = "confirmArea"
              :value="this.code"
            />
          </van-action-sheet>
        </van-col>



        <van-col span="17">
          <!-- 搜索 -->
          <div class="search_wrapper">
            <div class="search_bar">
              <van-icon name="search"  @click="sousuo" class="search_icon" />
<!--              <p class="hot_key">{{ hot_key }}</p>-->
              <input type="text" v-model="search" placeholder="请输入搜索热词">
            </div>
          </div>
        </van-col>
      </van-row>


    </div>

      </van-sticky>

<!--    ***************************************************-->

    <div class="main">
      <index-nav :inputName="chuanzhi"></index-nav>

<!--      <banner></banner>-->
<!--      ************************-->
      <div>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" >
          <van-swipe-item @click="swiptimg(item.carouselArea)" v-for="(item, index) in banner_list" :key="index">
            <div class="banner_wrapper">
              <img :src="item.carouselUrl" />
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>

<!--      ****************************-->
<div style="padding: 0.5rem 0rem 0rem 0rem"></div>






      <div align="left" style=";display: flex;flex-wrap: wrap;">
        <div  style="margin-left: 0.75rem;padding-bottom: 3vw;" v-for="(construction,index) in constructionList" @click="tiaohzuan(construction.constructionId,construction.supplierId)">
          <van-image
            round
            style="border-radius:10px;"
            width="10rem"
            height="10rem"
            fit="cover"
            :src="construction.shoutu"
          />

          <div>
            <div align="left" style="border-radius: 1rem;box-shadow:0 8px 12px #ebedf0;">
              <van-image
                style="float: left;margin-top: 0.25rem;margin-left: 0.5rem"
                round
                width="1rem"
                height="1rem"
                fit="cover"
                :src="construction.shoutu"
              />
              <p style="margin:5px 0;padding: 0;height: 1.5rem;line-height: 1.55rem">{{construction.shopsName}}直营</p>
            </div>

            <div
              align="left"
              class="zx-box"
              style="margin-bottom:5px;margin-top:5px;"
            >
              <p style="width: 5rem">
                <van-tag
                  plain
                  style="margin-right:5px;"
                >{{construction.constructionName}}</van-tag>
              </p>
              <p style="width: 5rem">
                <van-tag plain>{{construction.shopsName}}</van-tag>
              </p>
            </div>

            <div style="width: 10rem" class="shop-name">
              <span>店铺名称：{{construction.shopsName}}</span>
            </div>

            <div align="left bottom-left">
              <div class="zx-box">
                <span style="color: goldenrod;padding: 3px 5px;border:1px solid goldenrod;border-radius:5px;">市场价</span>
                <span style="font-weight: bolder;font-size: 1rem">￥{{construction.price}}</span>
              </div>
            </div>

          </div>
        </div>
        <div
          class="material-list-grid"
          v-for="(product,index) in productCategory"
          @click="toDetails(product.productId)"
        >

          <van-image
            round
            style="border-radius:10px;"
            width="10rem"
            height="10rem"
            fit="cover"
            :src="product.picUrl"
          />
          <div class="material-list-grid-content">
            <div
              align="left"
              style="border-radius: 1rem;box-shadow:0 8px 12px #ebedf0;"
            >
              <van-image
                style="float: left;margin-top: 0.25rem;margin-left: 0.5rem"
                round
                width="1rem"
                height="1rem"
                fit="cover"
                :src="product.picUrl"
              />
              <p style="margin:5px 0;padding: 0;height: 1.5rem;line-height: 1.55rem">{{product.categoryName}}直营</p>
            </div>

            <div
              align="left"
              class="zx-box"
              style="margin-bottom:5px;margin-top:5px;"
            >
              <p style="width: 5rem">
                <van-tag
                  plain
                  style="margin-right:5px;"
                >{{product.productName}}</van-tag>
              </p>
              <p style="width: 5rem">
                <van-tag plain>{{product.shopsName}}</van-tag>
              </p>
            </div>

            <div style="width: 10rem" class="shop-name">
              <span>店铺名称：{{product.shopsName}}</span>
            </div>

            <div align="left bottom-left">
              <div class="zx-box">
                <span style="color: goldenrod;padding: 3px 5px;border:1px solid goldenrod;border-radius:5px;">市场价</span>
                <span style="font-weight: bolder;font-size: 1rem">￥{{product.price}}</span>
              </div>
            </div>

          </div>

        </div>

      </div>
      </div>




<!--    **********************************************-->
    <van-sticky> <footer-active></footer-active></van-sticky>

  </div>
</template>

<script>

  import {Toast} from "vant";
  import local from '@/utils/localStorage.js';
  import { findConstructionList,findAllAdder,findlistcomt,finddeptname,findAllList,ipAddress} from "@/api/commodity/shop_product";
  import areaList from '@/utils/area';

  export default {
    name: "Index",
    components: {
      // IndexHeader: () => import("@/components/index/IndexHeader.vue"), // 头部
      IndexNav: () => import("@/components/index/IndexNav.vue"), //十个按钮
      // Banner: () => import("@/components/commons/Banner.vue"), //轮播图
      // IndexList: () => import("@/components/index/IndexList.vue"), //商品
      FooterActive: () => import("@/components/footer_active.vue"), //底部
    },
    data() {
      return {
        code:'',
        city:'',
        search:null,
        chuanzhi:'',
        showPicker: false,
        province:'',
        productCategory: [],
        constructionList: [],
        loading: false,
        finished: false,
        refreshing: false,
        total: 0,
        params: { page: 1, size: 5, },
        columns: [],
        address:[],
        banner_list: [],
        carouselAreaaa:"石家庄市",
        show: false, //是否显示地区选择面板
        hot_key: "请输入热搜词", //热搜词
        value: '',
        // areaList: {},

        showArea:false,
        areaTest:"石家庄市",
        areaList,
      };
    },
    created() {
      this.checkLogin();
      this.getList();
      this.finddeptname();
      this.findAllList();
      this.getLunbo();
    },

    methods: {
      sousuo(){
      this.findAllList();
      },

      /* 此处是显示全部地区的 */
      finddeptname(){
        finddeptname().then(res=>{
          for(let i=0;i<res.data.length;i++){
            this.columns[i] = res.data[i].deptName;
          }
        })
      },



      findAllList(){
        var carouselArea = this.addressaa;
        const productInfo = {
          productId:"",
          productCore:"",
          address:carouselArea,
          productName : this.search
        }
        findAllList(productInfo).then(res=>{
          this.productCategory = res.data.rows;
          this.onConfirm(value);
        })
        var params = {constructionName:this.search,address:carouselArea};
        findConstructionList(params).then(res => {
          this.constructionList = res.data.rows;
        })
      },
      onConfirm(value) {
        this.value = value;
        var address = this.value;
        var carouselArea = this.value;
        findAllAdder(address).then(res => {
          this.productCategory = res.data.rows;
          // console.log(res);
        })
        findlistcomt(carouselArea).then(res=>{
          console.log("***************res.data.rows"+JSON.stringify(res.data))
          this.banner_list = res.data;
        })

        this.showPicker = false;
      },

      // 地址确定事件
      confirmArea(res){
        this.address.city = "";
        for (let i = 0; i < res.length; i++){
          this.address.city = res[1].name;
          this.chuanzhi = res[0].name+res[1].name+res[2].name;
          console.log("**********address.city************"+this.chuanzhi)
        }
        for (let i=0;i<res.length;i++){
          this.addressaa = res[1].name
        }
        var carouselArea = this.addressaa;
        var address = this.addressaa;

        findAllAdder(address).then(res => {
          this.productCategory = res.data.rows;
        })
        var param = {address:address}
        findConstructionList(param).then(res => {
          this.constructionList = res.data.rows;
        })
// alert(carouselArea)
        findlistcomt(carouselArea).then(res=>{
          this.banner_list = res.data;
        })

        this.showArea = false;
      },

      getLunbo(){
        ipAddress().then(res=>{
          this.address = res.data.data;
          // var carouselArea =this.carouselAreaaa;
          var carouselArea = this.address.city;
          findlistcomt(carouselArea).then(res=>{
            this.banner_list = res.data;
          })
        })
      },

      // 地址取消事件
      cancelArea(res){
        this.showArea = false;
      },

      swiptimg(carouselArea){
          this.$router.push({ path: "/ClusterList", query:{carouselArea: carouselArea} })
      },

      toDetails (productId) {
        this.$router.push({ path: "/commodity_details", query: { commodityId: productId } });
      },
      tiaohzuan(constructionId,supplierId){
        this.$router.push({path:"/ShopDetails",
          query:{
            constructionId: constructionId,
            supplierId: supplierId,
            stat:2
          }});
      },

      getList () {
        ipAddress().then(res=>{
          this.province = res.data.data.province;
          this.city = res.data.data.city;
          this.addressaa = res.data.data.city;
          var arr = Object.entries(this.areaList.city_list);
          for (let i = 0; i < arr.length; i++) {
            if (arr[i][1] == this.city) {
              this.code = arr[i][0];
              break;
            }
          }
          findAllAdder(res.data.data.city).then(res => {
            this.productCategory = res.data.rows;
            // console.log(res);
          })
          findConstructionList({address:res.data.data.city}).then(res => {
            this.constructionList = res.data.rows;
          })
        })
      },


      //打开地区选择面板
      chooseArea() {
        this.show = !this.show;
        this.arrow = "arrow-up";
      },



      //选择地区
      // onConfirm(picker) {
      //   console.log(picker[picker.length - 1]);
      //   this.area = picker[picker.length - 1].name;
      //   this.area_id = picker[picker.length - 1].code;
      //   this.onClose();
      // },
      //关闭地区选择面板
      // onClose() {
      //   this.show = false;
      //   this.arrow = "arrow-down";
      // },


      checkLogin(){
        let token = local.get('token');
        if(token == null){ //判断是否登录
          Toast("请先登录");
          // 返回登录页
          this.$router.push({path:"/login_index"});
        }
      },
      loginP(){
        loginPw().then((res) => {
          // console.log(res);
        });
      }
    }
  };
</script>

<style scoped>
  .sousuo{
    border-radius: 15px;
    height: 3rem;
  }

  .banner_wrapper {
    width: 100%;
    height: 40vw;
    overflow: hidden;
  }
  .banner_wrapper img {
    transform: translateY(-15%);
  }
  .index_list {
    padding-bottom: 60px;
    height: calc(100*10);
  }
  .main{
    /*padding: 0vw 4vw;*/
  }


  .search_bar {
    display: flex;
    height: 10.133vw;
    width: 100%;
    margin-top: 1.867vw;
    line-height: 10.133vw;
    font-size: 3.733vw;
    background-color: #ffffff;
    border-radius: 13.333vw;
    box-shadow: 0.533vw 0.533vw 1.333vw rgb(219, 219, 219);
    padding: 0px 19.999px;
    box-sizing: border-box;
  }
  .hot_key {
    color: #000000;
  }
  .search_icon {
    line-height: 10.133vw;
    font-size: 4.8vw;
    margin-right: 2.667vw;
    color: #999999;
  }
  .content {
    padding: 0.16rem 0.16rem 1.6rem;
  }
  .index_header {
    height: 14.4vw;
    background-color: #ffffff;
    box-sizing: border-box;
    width: 100%;
    padding: 0px 4vw;
  }
  .area {
    height: 14.4vw;
    line-height: 14.4vw;
    color: #777777;
    width: 100%;
  }


  .shop-name {
    font-size: 12px;
    padding-bottom: 5px;
    text-align: left;
  }

  .van-tag {
    padding-left: 5px;
    padding-right: 5px;
  }

  .zx-box {
    display: flex;
    align-items: center;
  }

  .index_item {
    margin-top: 5.333vw;
    margin-bottom: 8vw;
  }

  .info1 {
    display: flex;
    margin-top: 2.2vw;
  }
  .info1 p {
    font-size: 3.733vw;
    height: 4.4vw;
    line-height: 4.4vw;
    margin-right: 1.6vw;
    color: #777777;
  }
  .info1 .distance {
    font-size: 3.2vw;
    color: #000;
  }
  .info1 .i {
    font-size: 4.4vw;
  }
  .title {
    margin: 2.2vw 0vw;
    color: #333;
  }
  .content {
    text-align: left;
  }

  .material-list-grid {
    display: inline-block;
    /*padding:0 0.4rem;*/
    margin-left: 0.75rem;
    margin-bottom: 5vw;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 2vw;
  }
  .material-list-grid P,
  span {
    font-size: 0.5rem;
    padding: 0.1rem 0;
  }
  .custom-title {
    margin-right: 4px;
    vertical-align: middle;
    font-size: 1rem;
  }
  .search-icon{

  }
</style>
